<template>
  <span :class="{
    'empty': status === 'empty',
    'booked': status === 'booked',
    'selected': status === 'selected',
    'disabled': disabled || status === 'disabled'
  }"
        class="seat" @click="clickThis"
  ></span>
</template>

<script>
export default{
  props: {
    X: {},
    Y: {},
    status: {
      validator: function(value) {
        const status_arr = [
          'disabled',
          'empty',
          'booked',
          'selected'
        ]

        return status_arr.indexOf(value) >= 0
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickThis() {
      const seat = {
        x: this.X,
        y: this.Y,
        status: this.status,
        disabled: this.disabled
      }
      this.$emit('click', seat)
    }
  }
}
</script>
<style scoped lang="scss">
  .seat{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    margin: 0 5px;
  }
  .empty{
    background: url(~assets/seat/empty.png);
    background-size: 100% 100% ;
  }
  .fill{
    background: url(~assets/seat/fill.png);
    background-size: 100% 100% ;
  }
  .booked{
    background: url(~assets/seat/book.png);
    background-size: 100% 100% ;
  }
  .selected{
    background: url(~assets/seat/selectd.png);
    background-size: 100% 100% ;
  }
  .disabled{
    background: url(~assets/seat/disabled.png);
    background-size: 100% 100% ;
  }

</style>
